import { Button, Image, Modal, Popconfirm, Table, message, Form, Input, DatePicker, Tag, Select } from 'antd';
import { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import React, { useState } from 'react'
import dayjs from 'dayjs'

import Upload from '@/components/upload'
import { maintenanceParams } from '@/apis/mainTenance';
import { reviseMaintenanceRequest } from '@/apis/mainTenance';
import { deleteMaintenancRequest } from '@/apis/mainTenance';
import { formatUtc } from '@/utils';
import { layout } from '@/utils/contants';
import { useColumsSearch } from '@/hooks/useColumsSearch';
import { storeAll } from '@/store';
import { observer } from 'mobx-react-lite';

interface mainType {
	username: string,
	phone: string,
	number: string,
	position: string,
	notes: string,
	picture: string,
	createAt: any,
	id: number
}
const Maintenance: React.FC = () => {
	const [open, setOpen] = useState<boolean>(false)
	const [currentMaintenance, setCurrentMaintenance] = useState<mainType>();
	const [pic, setPic] = useState<string>('');
	const [form] = Form.useForm()
	const { mainTenance: { maintenances, getMaintenances }, mainTenancer: { maintenancers }, carsStore: { cars } } = storeAll
	const pagination: TablePaginationConfig = {
		defaultCurrent: 1,
		pageSize: 10,
		total: maintenances.length || 0
	}

	const deleteMaintenances = (id: number) => {
		deleteMaintenancRequest(id).then((res: any) => {
			message.success(res.message)
			getMaintenances()
		})
	}

	const revise = (value: maintenanceParams) => {
		value.picture = pic
		value.id = (currentMaintenance as mainType).id
		reviseMaintenanceRequest(value).then((res: any) => {
			message.success(res.message)
			getMaintenances()
			setOpen(false)
		})
	}

	const opneModal = (record: mainType) => {
		record.createAt = dayjs(record.createAt)
		setOpen(true)
		setCurrentMaintenance(record)
		setPic(record.picture)
		form.setFieldsValue(record)
	}

	const closeModal = () => {
		setOpen(false)
		form.resetFields()
	}

	const columns: ColumnsType<mainType> = [
		{
			title: '用户名',
			dataIndex: 'username',
		},
		{
			title: '用户联系方式',
			dataIndex: 'phone',
			width: 180
		},
		{
			title: '车牌号',
			dataIndex: 'number',
			filterMode: 'tree',
			filterSearch: true,
			onFilter: (value: string | number | boolean, record: mainType) => record.number.includes(value as string),
			...useColumsSearch<mainType>().getColumnSearchProps('number')
		},
		{
			title: '车辆类型',
			dataIndex: 'parkingType',
		},
		{
			title: '车位位置',
			dataIndex: 'position',
		},
		{
			title: '维修原因',
			dataIndex: 'notes',
			width: 180,
		},
		{
			title: '维修状态',
			dataIndex: 'status',
			render(status) {
				return status === 0 ? <Tag color="#f50">维修中</Tag> : <Tag color="#2db7f5">维修完成</Tag>
			}
		},
		{
			title: '维修人员姓名',
			dataIndex: 'name',
			width: 150
		},
		{
			title: '维修人员联系电话',
			dataIndex: 'phone1',
			width: 180
		},
		{
			title: '维修费用',
			dataIndex: 'cost',
			render(cost) {
				return cost === 0 ? '---' : cost
			}
		},
		{
			title: '创建时间',
			dataIndex: 'createAt',
			defaultSortOrder: 'descend',
			render: (createAt) => formatUtc(createAt),
			sorter: (a, b) => a.createAt > b.createAt ? 1 : -1,
			width: 200
		},
		{
			title: '图片',
			dataIndex: 'picture',
			render: (picture) => <Image className="tableAvater" src={picture} alt=""></Image>
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			width: 200,
			render: (_, record) => {
				return <>
					<Button type="primary" danger>
						<Popconfirm
							title="Delete the task"
							description="你确定要删除此维修记录吗"
							okText="确定"
							cancelText="取消"
							onConfirm={() => deleteMaintenances(record.id)}
						>
							删除
						</Popconfirm>
					</Button>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	];

	return <div className="maintenanceWrap">
		<Table dataSource={maintenances} rowKey={(record) => record.id} columns={columns} pagination={pagination} scroll={{ x: '140%' }}>
		</Table>
		<Modal open={open} title="修改维修记录" onCancel={closeModal} footer={null}>
			<Form form={form} onFinish={revise} {...layout}>
				<Form.Item name={['notes']} label="维修原因">
					<Input />
				</Form.Item>
				<Form.Item name={['mid']} label="维修人员">
					<Select
						options={maintenancers.map(item => ({ value: item.id, label: item.name }))}
					/>
				</Form.Item>
				<Form.Item name={['cid']} label="维修车辆">
					<Select
						options={cars.map(item => ({ value: item.id, label: item.number }))}
					/>
				</Form.Item>
				<Form.Item name={['createAt']} label="申请时间">
					<DatePicker showTime />
				</Form.Item>
				<Form.Item name={['picture']} label="图片">
					<Upload src={pic} getImgUrl={(url: string) => setPic(url)} />
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(Maintenance)